<template>
  <div class="setting-message-channel-email">
    <div class="setting-item" style="border:0;">
      <ui-title 
        :title="$t('setting.messageChannel.companyEmailConfig[0]')"
        :tips="$t('setting.messageChannel.companyEmailConfig[1]')"
      />

      <div class="scope-container email-container">
        <div class="icon-contain">
          <i class="iconfont icon-mail-fill1"></i>
        </div>

        <div v-if="formData.email" class="content">
          <p>{{$t('setting.messageChannel.companyEmailConfig[2]')}}</p> 
          <p>{{ formData.email }}</p>
          <el-button type="primary" @click="edit">{{$t('common.base.edit')}}</el-button>
          <el-button @click="del">{{$t('common.base.delete')}}</el-button>
        </div>
        <div v-else class="content">
          <p>{{$t('setting.messageChannel.currentEmail')}}</p> 
          <div class="no-bind">{{$t('setting.messageChannel.tip.addEmail')}}</div>
          <el-button type="primary" @click="formStatus.editFrom = true">{{$t('setting.messageChannel.addEmail')}}</el-button>
        </div>
      </div>

      <div class="tips">
        {{$t('setting.messageChannel.companyEmailConfig[3]')}}
        <p>{{$t('setting.messageChannel.companyEmailConfig[4]')}}</p>
        <p>{{$t('setting.messageChannel.companyEmailConfig[5]')}}</p>
        <p>{{$t('setting.messageChannel.companyEmailConfig[6]')}}</p>
      </div>
    </div>
  
    <base-modal
      :show="formStatus.editFrom"
      class="createView"
      width="500px"
      :title="formData.email ? $t('setting.messageChannel.editSendEmail') : $t('setting.messageChannel.addSendEmail')"
      @close="closeDialog"
    >
      <email-form
        v-if="formStatus.editFrom"
        ref="emailForm"
        :form-status="formStatus"
        :email-data="formData"
        @changeFormStatus="changeFormStatus"
      />
      <div slot="footer">
        <div v-if="formStatus.editFrom" class="button-setting">
          <el-button @click="closeDialog">{{$t('common.base.close')}}</el-button>
          <el-button type="primary" @click="sendEmail()">{{$t('setting.messageChannel.testSend')}}</el-button>
          <el-button type="primary" @click="formStatus.submitFrom = true">{{$t('common.base.save')}}</el-button>
        </div>
      </div>
    </base-modal>
  </div>
</template>

<script>
import * as EmailMessageApi from '@src/api/EmailApi';
import EmailForm from './emailForm.vue';
import { t } from '@src/locales';
export default {
  name: 'setting-message-channel-email',
  components: {
    EmailForm
  },
  data() {
    return {
      loadingPage: false,
      loading: false,
      formData: {},
      formStatus: {
        editFrom: false,
        sendTestEmail: false,
        submitFrom: false,
      },
    };
  },
  created() {
    this.getEmailConfig();
  },
  methods: {
    changeFormStatus(val) {
      this.formStatus = val;
    },
    // 关闭窗口
    closeDialog() {
      this.formStatus.editFrom = false;
    },
    // 编辑邮箱配置
    edit(){
      this.formStatus.editFrom = true;
      this.formData.isEdit = true;
    },
    // 删除邮箱配置
    del() {
      this.$confirm(t('setting.messageChannel.tip.deleteEmail'), t('common.base.toast'), {
        confirmButtonText: t('common.base.confirm'),
        cancelButtonText: t('common.base.cancel'),
      })
        .then(() => {
          this.delConfig();
        })
    },
    async delConfig(){
      try {
        const {code, message} = await EmailMessageApi.delConfig();
        if(code != 0) return this.$message.warning(message || t('common.base.deleteFail'));
        // 刷新界面
        this.getEmailConfig();
      } catch (error) {
        console.warn(error);
      }
    },
    // 编辑配置
    async getEmailConfig() {
      try {
        this.loading = true;
        const { code, data, message } = await EmailMessageApi.emailConfig();
        this.loading = false;
        if (code != 0) return this.$message.warning(message);
        this.formData = data || {};
      } catch (error) {
        this.loading = false;
        console.warn(error);
      }
    },
    // 发送测试邮件
    sendEmail() {
      this.formStatus.submitFrom = false;
      this.formStatus.sendTestEmail = true;
    },
  },
}
</script>

<style lang="scss">
.setting-message-channel-email {
  .setting-item {
    .scope-container {
      margin: 12px 0 0 12px;
    }
    .email-container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 389px;
      height: 214px;
      background: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1200);
      border-radius: 4px;
      background: linear-gradient(315deg, #FFFFFF 0%, #FCFEFB 71%, #F8FFF4 100%, #F8FFF4 100%);
      .icon-contain{
        margin:16px 0 0 16px;
        width: 32px;
        height: 32px;
        background: #52C41A;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont{
          color:#fff;

        }
      }
      img {
        width: 112px;
        height: 112px;
        margin-top: 32px;
        margin-bottom: 16px;
      }
      .content {
        padding: 16px;
        p {
          height: 32px;
          font-size: 16px;
          font-weight: 600;
          color: $text-color-primary;
          line-height: 32px;
          margin-bottom: 0;
        }
        button {
          margin-top: 36px;
        }
        .no-bind{
          height: 32px;
          font-size: 18px;
          font-weight: 500;
          color: #BFBFBF;
          line-height: 32px;
        }
      }
    }
  }

  .setting-edit {
    margin: 0 8px;
    color: $color-primary;
    cursor: pointer;
  }
  .setting-del {
    color: #f56c6c;
    cursor: pointer;
  }
  .tips {
    color: $text-color-secondary;
    margin-top: 32px;
    margin-left: 12px;
    font-size: 12px;
    p {
      margin: 8px 0;
    }
  }
  .el-dialog__headerbtn {
    top: 0;
  }
  .base-modal {
    margin-top: 15vh;
    .base-modal-body {
      padding: 20px;
    }
  }
}
.email-el-message-box{
  width: 420px !important;
}
</style>